<template>
  <!-- 标题 -->
  <div class="title">
    {{ title }}
  </div>
  <div v-if="detail" class="detail">
    <p>根据您注册的学生年龄</p>
    <p>系统已为您推荐：{{ ApplyEnum[0].label }}</p>
  </div>
  <!-- 按钮组 -->
  <div class="btn-group">
    <!--
      :disabled="item.value.length > 0"

   -->
    <van-button
      v-for="item in ApplyEnum"
      :key="item.value"
      class="btn-space btn-h btn-text"
      type="primary"
      @click="handleClick(item.value)"
    >
      {{ item.label }}
    </van-button>
  </div>
</template>

<script setup lang="ts">
import { ApplyEnum } from '@/enums/optionEnum'

defineProps({
  title: {
    type: String,
    default: '请选择入园入学申请类型',
  },
  detail: {
    type: String,
    default: 'detail',
  },
})

const $emits = defineEmits(['click'])
// 点击事件
function handleClick(val: string) {
  $emits('click', val)
}
</script>

<style scoped lang="less">
.title {
  font-weight: bold;
  font-size: 14px;
}
.detail {
  font-size: 18px;
  margin-top: 20px;
}
.btn-group {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.btn-space:not(:last-child) {
  margin-bottom: 30px;
}
.btn-h {
  height: 58px;
}
.btn-text {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  letter-spacing: 1em;
}
</style>
